import React from "react";
import {
  Input,
  Button,
  Tabs,
  Select,
  Card,
  List,
  Typography,
  Tag,
  Avatar,
} from "antd";
import {
  StarOutlined,
  HeartOutlined,
  MessageOutlined,
} from "@ant-design/icons";
import "./index.less";

const { Title, Paragraph, Text, Link } = Typography;
const { TabPane } = Tabs;
const { Option } = Select;
const { Search } = Input;

const ArticleSearch: React.FC = () => {
  const articles = [
    {
      title: "Alipay",
      tags: ["Ant Design", "设计语言", "蚂蚁金服"],
      description:
        "段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。",
      author: {
        name: "付小小",
        avatar:
          "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png",
        url: "https://ant.design",
      },
      publishTime: "2025-05-13 11:23",
      stats: {
        stars: 181,
        likes: 129,
        comments: 14,
      },
    },
  ];

  return (
    <div className="article-search-page" data-oid="r3uz-dy">
      <div className="header" data-oid="ilz79-8">
        <Title level={2} data-oid="gfktw_.">
          搜索列表（文章）
        </Title>
        <Search
          placeholder="请输入"
          enterButton="搜索"
          size="large"
          style={{ width: 300 }}
          data-oid="n7z1e94"
        />
      </div>

      <Tabs defaultActiveKey="1" data-oid=".e_-hd:">
        <TabPane tab="文章" key="1" data-oid="wjwz49m" />
        <TabPane tab="项目" key="2" data-oid="wlbc8rp" />
        <TabPane tab="应用" key="3" data-oid="1qwdvls" />
      </Tabs>

      <Card className="filter-section" data-oid="p:adv7b">
        <div className="filter-row" data-oid="tbarheh">
          <Text data-oid="dpn9zni">所属类目：</Text>
          <Select defaultValue="全部" style={{ width: 120 }} data-oid="1xt8pqj">
            <Option value="全部" data-oid="i-9fckc">
              全部
            </Option>
            <Option value="类目1" data-oid="jr3hd9l">
              类目1
            </Option>
            <Option value="类目2" data-oid="c4f8x7g">
              类目2
            </Option>
          </Select>
        </div>
      </Card>

      <List
        className="article-list"
        itemLayout="vertical"
        dataSource={articles}
        renderItem={(item) => (
          <List.Item
            key={item.title}
            actions={[
              <Button
                type="text"
                icon={<StarOutlined data-oid="b18348x" />}
                data-oid="8k7fss8"
              >
                {item.stats.stars}
              </Button>,
              <Button
                type="text"
                icon={<HeartOutlined data-oid="3swtj_1" />}
                data-oid="xyvqtag"
              >
                {item.stats.likes}
              </Button>,
              <Button
                type="text"
                icon={<MessageOutlined data-oid="3pzp0ao" />}
                data-oid="fbm8y1:"
              >
                {item.stats.comments}
              </Button>,
            ]}
            data-oid="x4d.oj."
          >
            <List.Item.Meta
              title={item.title}
              description={
                <div className="article-meta" data-oid="gtslmkd">
                  <Avatar src={item.author.avatar} data-oid="7gx5hjf" />
                  <Text data-oid="azl59:c">{item.author.name} 发布在 </Text>
                  <Link href={item.author.url} data-oid="zffb29v">
                    {item.author.url}
                  </Link>
                  <Text data-oid="vj0:78q">{item.publishTime}</Text>
                </div>
              }
              data-oid="spexs6c"
            />

            <div className="article-tags" data-oid="3m1-0a1">
              {item.tags.map((tag) => (
                <Tag key={tag} data-oid="h_z938k">
                  {tag}
                </Tag>
              ))}
            </div>
            <Paragraph className="article-description" data-oid="43gpz.x">
              {item.description}
            </Paragraph>
          </List.Item>
        )}
        data-oid="3fx4jf7"
      />

      <div className="load-more" data-oid="krac._3">
        <Button type="primary" data-oid="vqdkc1r">
          加载更多
        </Button>
      </div>
    </div>
  );
};

export default ArticleSearch;
